<template>
	<view class="p20" style="padding-top:0;">
		<view v-if="show_main"><!--加载完成后显示-->
			<view v-for="(item,index) in list" :key="item.id" class="account_list">
				<view class="f34 p20 col666">{{item.change_time}}</view>
				<view class="disfr-lr pl20 pr20 f32">
					<view class="disf">
						<view class="pr" style="top:3rpx;"><u-icon name="red-packet-fill" color="#FF6347"></u-icon></view>
						<view>{{item.change_desc}}</view>
					</view>
					<view class="pr10" :style="item.change < 0 ? 'color:red':''">{{item.change}}</view>
				</view>
				<view class="p10 pl50 col999 f32 pb20">{{item.serial_number}}</view>
			</view>
			
			
			<!--无数据提示-->
			<view v-if="list.length <= 0 && not_load" style="text-align: center;margin-top: 40%;">
				<view><u-icon name="wuneirong-copy" custom-prefix="qxl-icon" color="#999999" size="100"></u-icon></view>
				<view class="f32 col999 mt20">什么都木有哦</view>
			</view>
		
			<pageload :page_load="page_load" :next_page="next_page" :list="list" /><!--分页加载状态-->
			
		</view><!--加载完成后显示-->
		<loading :loading="not_load"/><!--加载状态-->
	</view>
</template>

<script setup>
import { onLoad, onShow, onHide, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app';
import { ref } from 'vue';	
uni.setNavigationBarTitle({ title: '加载中...' });
const show_main=ref(false);
const page_load=ref(false);
const not_load=ref(false);
const next_page=ref('');
const list=ref([]);
onLoad(()=>{
	loadPage({},false);
});
onShow(()=>{
	
});
onHide(()=>{
	
});
/**
 * 加载接口数据
 * @param {Object} options  参数,对像数组
 * @param {Object} isPage   是否加载大于1页
 */
const loadPage=async (options,isPage)=>{
	let ret = await uni.$get('/appapi-member-getcoinlist',options);
	if(ret.error_code != 0){
		uni.$utils.showToast(ret.info);
		return;
	}
	uni.setNavigationBarTitle({ title: ret.data.virtual_coin_name });
    page_load.value=false;
	show_main.value=true;
	not_load.value=true;
	next_page.value=ret.data.next_page;
	if(isPage) list.value=[...list.value,...ret.data.list];
	else list.value=ret.data.list;
	
};
//上拉触底加载分页
onReachBottom(()=>{
	if (!next_page.value) return;
	if (page_load.value) return;
	page_load.value=true;
	setTimeout(()=>{
	  loadPage(next_page.value, true); 
	},2000);
});
</script>

<style lang="scss">
	 page{}
     .account_list{
		 width: 98%;
		 min-height: 140rpx;
		 border-radius: 8px;
		 background: #fff;
		 text-align: left;
		 margin: 0 auto;
		 margin-top: 20rpx;
		 
	 }
	.details_bot{
			 width: 100%;
			 position: fixed;bottom:0;
			 left:0;height: 140rpx;
			 background: #fff;
			 z-index:9999;
	}
	.details_collect{
		width:270rpx;
		line-height: 90rpx;
		font-size: 40rpx;
	}
	.my_submit{
		 width:400rpx;
		 height: 90rpx;
		 font-size: 32rpx;
		 background: #01b9b7;
	}
</style>
